<template>
  <NavBarVue title="商家首页"/>
  <view class="myBox">
    <!-- 头部 -->
    <view class="myLog">
      <div class="head">
        <div class="head_left">
          <img src="/static/1004.webp" @click="toshoop" alt=""
               style="width: 85px;height: 80px;border-radius: 50%;"/>
        </div>
        <div class="head_right">
          <view style="display: flex;">
            <p>蔚然青岛</p>
            <u-icon name="checkmark-circle" color="skyblue"></u-icon>
          </view>
          <p style="color: #ddd;margin-top: 5px;font-size: 13px;">汽车品牌 | <span>ID：NOI_qin</span></p>
          <p style="color: #ddd;margin-top: 5px;font-size: 13px;">IP属地 <span>：山东</span></p>
        </div>
      </div>
      <p style="color: #ccc;margin-left: 20px;font-size: 14x;">红瓦绿树、碧海蓝天</p>
      <p style="color: #ccc;margin-left: 20px;font-size: 14x;">和蔚然一起满电出发</p>
      <div class="head_bot">
        <ul class="bot_left">
          <li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <p style="color: #fff;">3</p>
            <span style="color: #bbb;font-size: 12px;margin-top: 5px;">关注</span>
          </li>
          <li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <p style="color: #fff;">1.5万</p>
            <span style="color: #bbb;font-size: 12px;margin-top: 5px;">粉丝</span>
          </li>
          <li style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <p style="color: #fff;">3681</p>
            <span style="color: #bbb;font-size: 12px;margin-top: 5px;">获赞和评论</span>
          </li>
        </ul>
        <div class="bot_right">
          <button
              style="width: 70px;height: 30px;border-radius: 15px;line-height: 30px;margin-right: 10px; background: linear-gradient( 270deg, #FB7685 0%, #FF4D65 100%);color: #fff;">
            关注
          </button>
          <button
              style="width: 70px;height: 30px;border-radius: 15px;margin-right: 10px; line-height: 30px;background:rgb(99, 139, 160);color: #fff;border: 1px solid #fff;">
            私信
          </button>
        </div>
      </div>
      <ul class="logul">
        <li class="logli" v-for="item in imgs" :key="item.id" @click="goDian">
          <img :src="item.img" style="width: 70px;height: 70px; border-radius: 35px;" alt=""/>
          <p style="font-size: 14px;color: #eee;margin-top: 5px;">{{item.name}}</p>
        </li>
      </ul>
    </view>

    <!-- 主体部门 -->
    <view class="main">
      <u-sticky offset-top="0">
        <div class="main_tab">
          <u-tabs :list="list1" @click="click"></u-tabs>
        </div>
      </u-sticky>
      <div class="pubu">
        <view class="left">
          <view class="ul">
            <view class="li" v-for="item in leftlist" :key="item.id">

              <image src="/static/1002.png" class="ttt" @click="goDetails(item)"></image>
              <view class="nr">
                {{item.name}}
              </view>

              <view class="tx" style="display: flex; justify-content: space-between;">
                <view style="display: flex;">
                  <image src="/static/1001.png"
                         style="width:20px;height: 20px;border-radius: 10px;"/>
                  <view style="font-size: 12px;">{{item.ming}}</view>
                </view>
                <view style="display: flex;" @click="item.flag=!item.flag">
                  <view v-if="item.flag">
                    <u-icon name="heart-fill" size="21" color="red"></u-icon>
                  </view>
                  <view v-else>
                    <u-icon name="heart" size="21"></u-icon>
                  </view>

                  <view style="font-size: 12px;">{{item.shu}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="ul">
            <view class="li" v-for="item in rightlist" :key="item.id">
              <image src="/static/1001.png" class="tt" @click="goDetails(item)"></image>
              <view class="nr">
                {{item.name}}
              </view>
              <view class="tx" style="display: flex;justify-content: space-between;">
                <view style="display: flex;">
                  <image src="/static/1002.png"
                         style="width:20px;height: 20px;border-radius: 10px;"/>
                  <view style="font-size: 12px;">{{item.ming}}</view>
                </view>
                <view style="display: flex;" @click="item.flag=!item.flag">
                  <view v-if="item.flag">
                    <u-icon name="heart-fill" size="21" color="red"></u-icon>
                  </view>
                  <view v-else>
                    <u-icon name="heart" size="21"></u-icon>
                  </view>

                  <view style="font-size: 12px;">{{item.shu}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script setup>
import {
  reactive,
  ref
} from 'vue'
import NavBarVue from '../../../components/NavBar.vue';

const list1 = [{
  name: '笔记',
}, {
  name: '收藏',
}, {
  name: '点赞'
}]
const click = (item) => {
  console.log('item', item);
}
const imgs = ref([{
  id: 1,
  name: '正弘城店',
  img: '/static/1010.jpg',
},
  {
    id: 2,
    name: '中鼎大厦店',
    img: '/static/1011.jpg',
  },
  {
    id: 3,
    name: '圣熙店',
    img: '/static/1012.jpg',
  },
  {
    id: 4,
    name: '禹州店',
    img: '/static/1013.jpg',
  },
  {
    id: 5,
    name: '城南店',
    img: '/static/1014.jpg',
  },
])
const leftlist = reactive([{
  id: 0,
  name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
  shu: 298,
  ming: "小浣熊",
  flag: false
},
  {
    id: 1,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },
  {
    id: 2,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },
  {
    id: 3,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },
  {
    id: 4,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },
  {
    id: 5,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },
  {
    id: 6,
    name: "家人们，泰酷辣！和朋友们畅想唱歌的快乐",
    shu: 289,
    ming: "小浣熊",
    flag: false
  },

])
//右数据
const rightlist = reactive([{
  id: 0,
  name: "夏季出行，清凉攻略,走进最舒适的环境",
  shu: 297,
  ming: "小熊熊",
  flag: false
},
  {
    id: 1,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 2,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 3,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 4,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 5,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 6,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },
  {
    id: 7,
    name: "夏季出行，清凉攻略，走进最舒适的环境",
    shu: 279,
    ming: "小熊猫",
    flag: false
  },

])
const rightClick = () => {
  console.log('rightClick');
}

// 跳转商家主页
//跳转进店逛逛
const goDian = () => {
  uni.navigateTo({
    url: '/pages/shopTour/shopTour'
  })
}

</script>

<style scoped>
.myBox {
  width: 100vw;
  height: 100vh;
}

.myLog {
  width: 100%;
  height: 340px;
  padding: 30px 0px;
  background: rgb(99, 139, 160);
}

.head {
  width: 100%;
  height: 100px;
  /* background: salmon; */
  display: flex;
  /* margin-top: 20px; */
}

.head_left {
  width: 100px;
  height: 100%;
  /* background: salmon; */
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.head_right {
  flex: 1;
  margin-top: 17px;
  margin-left: 15px;
  color: #fff;
}

.head_bot {
  width: 100%;
  height: 80px;
  /* background: salmon; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bot_left {
  width: 200px;
  height: 100%;
  display: flex;
  /* background: salmon; */
  justify-content: space-evenly;
}

.bot_right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 100%;
  /* height: 500px; */
  /* background: sandybrown; */
  margin-top: -30px;
}

.main_tab {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 12px 12px 0px 0px;
  display: flex;
  justify-content: center;
}

.main_li {
  width: 100%;
  /* height: 200px; */
  /* background: seashell; */
  text-align: center;
}

.logul {
  width: 100%;
  height: 90px;
  /* background: salmon; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.logli {
  width: 70px;
  height: 100%;
  /* background: sandybrown; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pubu {
  width: 100%;
  /* height: 300px; */
  height: auto;
  display: flex;
  justify-content: space-evenly;
}

.left {
  width: 46vw;
  height: auto;
  margin-right: 2vw;
}

.left .ul {
  width: 100%;
  height: auto;
}

.left .ul .li {
  font-size: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;

}

.right {
  width: 46vw;
  height: auto;
}

.right.ul {
  width: 100%;
  height: auto;
}

.right .ul .li {
  font-size: 14px;
  width: 100%;
  height: auto;
}

.tx {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0px 10px;
  margin-top: 10px;
}

.nr {
  box-sizing: border-box;
  padding: 0px 10px;
}

.ttt {
  width: 100%;
  height: 220px;
}

.tt {
  width: 100%;
  height: 200px;
}
</style>